<template>
  <el-dialog
    title="Data Chart"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
  >
    <div ref="chart" style="width: 100%; height: 400px;"></div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">Close</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: true,
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: 'Data Chart',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['Max Value', 'Average Value', 'Min Value'],
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.getTimeAxis(),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'Max Value',
            type: 'line',
            data: this.getMaxValues(),
          },
          {
            name: 'Average Value',
            type: 'line',
            data: this.getAverageValues(),
          },
          {
            name: 'Min Value',
            type: 'line',
            data: this.getMinValues(),
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getTimeAxis() {
      const now = new Date();
      const timeAxis = [];
      for (let i = 0; i < 120; i++) { // 假设每分钟一个数据点
        const time = new Date(now.getTime() - i * 60000).toLocaleTimeString();
        timeAxis.unshift(time);
      }
      return timeAxis;
    },
    getMaxValues() {
      return Array.from({ length: 120 }, () => Math.random() * 100);
    },
    getAverageValues() {
      return Array.from({ length: 120 }, () => Math.random() * 100);
    },
    getMinValues() {
      return Array.from({ length: 120 }, () => Math.random() * 100);
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit('close');
    },
  },
};
</script>

<style scoped>
.el-dialog__body {
  padding: 20px;
}
</style>



